/* jsx ctrl+m*/
import React, { Component } from 'react';
import './css/index.css'
import { nanoid } from 'nanoid'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      oldList: [],
      newList: []
    }
    
  }
  render() {
    const oldListItem = this.state.oldList.map(item => {
      return (<div className="padding flex" key={item.id}>
        <p className="txt">
          <input type="checkbox" data-aid={item.id} onClick={this.handleAchieveClick} defaultChecked={item.check} />{item.value}
        </p>
        <button className="btn" data-aid={item.id} onClick={this.handleDelete}>删除</button>
      </div>)
    })
    const newListItem = this.state.newList.map(item => {
      return (<div className="padding flex" key={item.id}>
        <p className="txt">
          <input type="checkbox" data-aid={item.id} onClick={this.handleDidAchieveClick} defaultChecked={item.check} />{item.value}
        </p>
        <button className="btn" data-aid={item.id} onClick={this.handleDelete}>删除</button>
      </div>)
    })
    return (
      <div id='container'>
        <div className="head">
          <input type="text"
            value={this.state.value}
            onChange={this.handleChange}
            onKeyUp={this.handleEnter} />
        </div>
        <div className="content">
          <div className="oldheader">
            <p className="padding header-old">未完成{this.state.oldList.length}</p>
            {oldListItem}
          </div>
          <div className="newheader">
            <p className="padding header-new">已完成{this.state.newList.length}</p>
            {newListItem}
          </div>
        </div>
      </div>
    );
  }
  handleChange = (e) => {
    this.setState({ value: e.target.value })
  }
  handleEnter = (e) => {
    if (e.keyCode === 13) {
      let oldList = this.state.oldList
      oldList.push({
        value: this.state.value,
        id: nanoid(),
        check: false
      })
      this.setState({ oldList })
    }
  }
  handleAchieveClick = (e) => {
    let { aid } = e.target.dataset
    let oldList = this.state.oldList
    let newList = this.state.newList
    oldList.forEach((item, index) => {
      if (item.id === aid) {
        item.check = !item.check
        newList.push(item)
        oldList.splice(index, 1)
      }
    })
    this.setState({ oldList, newList })
  }
  handleDidAchieveClick=(e)=>{
    let { aid } = e.target.dataset
    let oldList = this.state.oldList
    let newList = this.state.newList
    newList.forEach((item, index) => {
      if (item.id === aid) {
        item.check = !item.check
        oldList.push(item)
        newList.splice(index, 1)
      }
    })
    this.setState({ oldList, newList })
  }
  handleDelete = (e) => {
    let { aid } = e.target.dataset
    let oldList = this.state.oldList
    let newList = this.state.newList
    oldList.forEach((item, index) => {
      if (item.id === aid) {
        oldList.splice(index, 1)
      }
    })
    newList.forEach((item, index) => {
      if (item.id === aid) {
        newList.splice(index, 1)
      }
    })
    this.setState({ oldList, newList })
  }
}
export default App;